{% extends 'base.html' %}
{% block title %}四Y-答题{% endblock %}
{% block css %}
    <link rel="stylesheet" href="/static/css/question.css">
{% endblock %}
{% block headjs %}
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
        if ({{ point }}) {
            alert({{ point }})
        }
    </script>
{% endblock %}
{% block body %}
    <div class="all">
        <div class="description">
            <form action="/ques/" method="post">
                {#            {% csrf_token %}#}

                <ul>1.{{ all_ques.0.0.ques }} {% if  check_problem.0 == 'false' %}
                    <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.0 == "a" %}checked {% endif %} type="radio" name="1"
                                              id="A"
                                              value="{{ all_ques.0.0.ans1 }}">{{ all_ques.0.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.0 == "b" %}checked {% endif %} type="radio" name="1"
                                              id="B"
                                              value="{{ all_ques.0.0.ans2 }}">{{ all_ques.0.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.0 == "c" %}checked {% endif %} type="radio" name="1"
                                              id="C"
                                              value="{{ all_ques.0.0.ans3 }}">{{ all_ques.0.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.0 == "d" %}checked {% endif %} type="radio" name="1"
                                              id="D"
                                              value="{{ all_ques.0.0.ans4 }}">{{ all_ques.0.0.ans4 }}<br></li>


                    2.{{ all_ques.1.0.ques }}{% if  check_problem.1 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.1 == "a" %}checked {% endif %} type="radio" name="2"
                                              id="A"
                                              value="{{ all_ques.1.0.ans1 }}">{{ all_ques.1.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.1 == "b" %}checked {% endif %} type="radio" name="2"
                                              id="B"
                                              value="{{ all_ques.1.0.ans2 }}">{{ all_ques.1.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.1 == "c" %}checked {% endif %} type="radio" name="2"
                                              id="C"
                                              value="{{ all_ques.1.0.ans3 }}">{{ all_ques.1.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.1 == "d" %}checked {% endif %} type="radio" name="2"
                                              id="D"
                                              value="{{ all_ques.1.0.ans4 }}">{{ all_ques.1.0.ans4 }}<br></li>


                    3.{{ all_ques.2.0.ques }}{% if  check_problem.2 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.2 == "a" %}checked {% endif %} type="radio" name="3"
                                              id="A"
                                              value="{{ all_ques.2.0.ans1 }}">{{ all_ques.2.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.2 == "b" %}checked {% endif %} type="radio" name="3"
                                              id="B"
                                              value="{{ all_ques.2.0.ans2 }}">{{ all_ques.2.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.2 == "c" %}checked {% endif %} type="radio" name="3"
                                              id="C"
                                              value="{{ all_ques.2.0.ans3 }}">{{ all_ques.2.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.2 == "d" %}checked {% endif %} type="radio" name="3"
                                              id="D"
                                              value="{{ all_ques.2.0.ans4 }}">{{ all_ques.2.0.ans4 }}<br></li>


                    4.{{ all_ques.3.0.ques }}{% if  check_problem.3 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.3 == "a" %}checked {% endif %} type="radio" name="4"
                                              id="A"
                                              value="{{ all_ques.3.0.ans1 }}">{{ all_ques.3.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.3 == "b" %}checked {% endif %} type="radio" name="4"
                                              id="B"
                                              value="{{ all_ques.3.0.ans2 }}">{{ all_ques.3.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.3 == "c" %}checked {% endif %} type="radio" name="4"
                                              id="C"
                                              value="{{ all_ques.3.0.ans3 }}">{{ all_ques.3.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.3 == "d" %}checked {% endif %} type="radio" name="4"
                                              id="D"
                                              value="{{ all_ques.3.0.ans4 }}">{{ all_ques.3.0.ans4 }}<br></li>


                    5.{{ all_ques.4.0.ques }}{% if  check_problem.4 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.4 == "a" %}checked {% endif %} type="radio" name="5"
                                              id="A"
                                              value="{{ all_ques.4.0.ans1 }}">{{ all_ques.4.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.4 == "b" %}checked {% endif %}type="radio" name="5"
                                              id="B"
                                              value="{{ all_ques.4.0.ans2 }}">{{ all_ques.4.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.4 == "c" %}checked {% endif %} type="radio" name="5"
                                              id="C"
                                              value="{{ all_ques.4.0.ans3 }}">{{ all_ques.4.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.4 == "d" %}checked {% endif %} type="radio" name="5"
                                              id="D"
                                              value="{{ all_ques.4.0.ans4 }}">{{ all_ques.4.0.ans4 }}<br></li>


                    6.{{ all_ques.5.0.ques }}{% if  check_problem.5 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.5 == "a" %}checked {% endif %} type="radio" name="6"
                                              id="A"
                                              value="{{ all_ques.5.0.ans1 }}">{{ all_ques.5.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.5 == "b" %}checked {% endif %} type="radio" name="6"
                                              id="B"
                                              value="{{ all_ques.5.0.ans2 }}">{{ all_ques.5.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.5 == "c" %}checked {% endif %} type="radio" name="6"
                                              id="C"
                                              value="{{ all_ques.5.0.ans3 }}">{{ all_ques.5.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.5 == "d" %}checked {% endif %} type="radio" name="6"
                                              id="D"
                                              value="{{ all_ques.5.0.ans4 }}">{{ all_ques.5.0.ans4 }}<br></li>


                    7.{{ all_ques.6.0.ques }}{% if  check_problem.6 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.6 == "a" %}checked {% endif %} type="radio" name="7"
                                              id="A"
                                              value="{{ all_ques.6.0.ans1 }}">{{ all_ques.6.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.6 == "b" %}checked {% endif %} type="radio" name="7"
                                              id="B"
                                              value="{{ all_ques.6.0.ans2 }}">{{ all_ques.6.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.6 == "c" %}checked {% endif %} type="radio" name="7"
                                              id="C"
                                              value="{{ all_ques.6.0.ans3 }}">{{ all_ques.6.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.6 == "d" %}checked {% endif %} type="radio" name="7"
                                              id="D"
                                              value="{{ all_ques.6.0.ans4 }}">{{ all_ques.6.0.ans4 }}<br></li>


                    8.{{ all_ques.7.0.ques }}{% if  check_problem.7 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.7 == "a" %}checked {% endif %} type="radio" name="8"
                                              id="A"
                                              value="{{ all_ques.7.0.ans1 }}">{{ all_ques.7.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.7 == "b" %}checked {% endif %} type="radio" name="8"
                                              id="B"
                                              value="{{ all_ques.7.0.ans2 }}">{{ all_ques.7.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.7 == "c" %}checked {% endif %} type="radio" name="8"
                                              id="C"
                                              value="{{ all_ques.7.0.ans3 }}">{{ all_ques.7.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.7 == "d" %}checked {% endif %} type="radio" name="8"
                                              id="D"
                                              value="{{ all_ques.7.0.ans4 }}">{{ all_ques.7.0.ans4 }}<br></li>


                    9.{{ all_ques.8.0.ques }}{% if  check_problem.8 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.8 == "a" %}checked {% endif %} type="radio" name="9"
                                              id="A"
                                              value="{{ all_ques.8.0.ans1 }}">{{ all_ques.8.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.8 == "b" %}checked {% endif %} type="radio" name="9"
                                              id="B"
                                              value="{{ all_ques.8.0.ans2 }}">{{ all_ques.8.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.8 == "c" %}checked {% endif %} type="radio" name="9"
                                              id="C"
                                              value="{{ all_ques.8.0.ans3 }}">{{ all_ques.8.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.8 == "d" %}checked {% endif %} type="radio" name="9"
                                              id="D"
                                              value="{{ all_ques.8.0.ans4 }}">{{ all_ques.8.0.ans4 }}<br></li>


                    10.{{ all_ques.9.0.ques }}{% if  check_problem.9 == 'false' %}
                        <span class="false">×</span>{% endif %}
                    <li class="select"><input {% if get_values.9 == "a" %}checked {% endif %} type="radio" name="10"
                                              id="A"
                                              value="{{ all_ques.9.0.ans1 }}">{{ all_ques.9.0.ans1 }}<br></li>
                    <li class="select"><input {% if get_values.9 == "b" %}checked {% endif %} type="radio" name="10"
                                              id="B"
                                              value="{{ all_ques.9.0.ans2 }}">{{ all_ques.9.0.ans2 }}<br></li>
                    <li class="select"><input {% if get_values.9 == "c" %}checked {% endif %} type="radio" name="10"
                                              id="C"
                                              value="{{ all_ques.9.0.ans3 }}">{{ all_ques.9.0.ans3 }}<br></li>
                    <li class="select"><input {% if get_values.9 == "d" %}checked {% endif %} type="radio" name="10"
                                              id="D"
                                              value="{{ all_ques.9.0.ans4 }}">{{ all_ques.9.0.ans4 }}<br></li>
                </ul>
                <input type="text" name="sign" value="click" hidden>
                <input type="reset" value="重置">
                <input onclick="checkRadios()" type="submit" value="提交">
            </form>
        </div>
    </div>
{% endblock %}

{% block footjs %}
    <script>
        const btn = document.getElementById('modeBtn');
        btn.addEventListener('click', (e) => {
            const body = document.body;
            if (body.className !== 'night') {
                body.className = 'night';
            } else {
                body.className = 'day';
            }
        });
    </script>
    <script type="text/javascript">
        $(function () {
            const body = document.body;
            if (body.className !== 'night') {
                $("ul li").mouseover(function () {
                    $(this).stop().css("color", "red")
                    $(this).siblings().stop().css("color", "black")
                    $('.false').stop().css("color", "red")
                })
            } else {
                $("ul li").mouseover(function () {
                    $(this).stop().css("color", "red")
                    $(this).siblings().stop().css("color", "white")
                    $('.false').stop().css("color", "red")
                })
            }
        });
    </script>
    <script type="text/javascript">
        function checkRadios() {
            //取得所有input标签
            var radios = document.getElementsByTagName("input");
            var arr = [];
            var radioArray = [];
            //循环标签
            for (var i = 0; i < radios.length; i++) {
                //判断标签是否是单选框标签
                if (radios[i].type === "radio") {
                    var radio = radios[i].checked;
                    radioArray.push(radios[i]); //把所有单选框装入数组
                    if (radio) {//判断单选框是否为选中状态, 选中的装入数组
                        arr.push(radios[i]);
                    }
                }
            }
            //如果所有单选框/2的个数==选中的个数,就返回true ,上
            if ((radioArray.length / 4) === arr.length) {
                {#alert("你的成绩为{{ point }}")#}
            } else {
                alert("您有空选项，是否继续提交？")
            }
        }
    </script>
{% endblock %}

